<template>
  <view class="pageHeight wh_750 flex flex-column align-center bg_F5F5F5">
    <s-header-title ref="headerTitle" title_click
                    background="#FFFFFF"
                    :title="family.details.name && !!is_login ? `${family.details.name}` : '未登录的家庭'"
                    :is-click="true" is-fixed is-display-back
                    @getPageHeight="getPageHeight"
                    :z-index="10"
    >
      <template>
        <view class="anniversariesList_headerTitle">
          <text class="anniversariesList_headerTitle_text" style="color: #C1C1C1;">家庭号: {{ page.options.code }}
          </text>
        </view>
      </template>
    </s-header-title>
    <view :style="{height:page.headerHeight + 'px'}"></view>
    <scroll-view class="wh_750" :scroll-y="true"
                 :style="{
                    height:`calc(100vh - ${page.headerHeight}px)`
                 }"
    >
      <view class="wh_750 flex flex-column align-center">
        <view class="family_header flex flex-column align-center justify-center mt_25 z_1"
              style="position: relative;"
              @click.stop="goFamilyAlbum"
              v-if="family.family_album.length <= 0"
        >
          <image class="family_header_image" mode="widthFix" :src="`${IMG_URL}/index/uploadPhoto.png`"></image>
          <view class="family_header_desc flex flex-column align-center">
            <text class="family_header_desc_littleText">点击上传全家福</text>
          </view>
          <view class="list_tap flex align-center justify-between">
            <view class="left flex align-center justify-center" @click.stop="openFamilyTraditionPath">
              <image :src="`${IMG_URL}/index/family_shouye_jiafeng_icon.png`"></image>
              <view class="ml_5">
                家风家训
              </view>
            </view>
            <view class="right flex align-center justify-center" @click.stop="titleClick">
              <image :src="`${IMG_URL}/index/family_shouye_jizhang_icon.png`"></image>
              <view class="ml_5">
                家庭记账本
              </view>
            </view>
          </view>
        </view>
        <view style="width: 702rpx;height: 477rpx;position: relative;" v-else>
          <swiper class="wh_702 hW_477" style="border-radius: 20rpx;overflow: hidden" :interval="2000" autoplay circular
                  @click="goFamilyAlbum">
            <swiper-item v-for="(item,index) in family.family_album" :key="index">
              <image :src="item.image" mode="aspectFill"
                     style="width: 100%;will-change: transform;height: 100%;"
                     @click="goFamilyAlbum()"
              ></image>
            </swiper-item>
          </swiper>
          <view class="list_tap flex align-center justify-between">
            <view class="left flex align-center justify-center" @click.stop="openFamilyTraditionPath">
              <image :src="`${IMG_URL}/index/family_shouye_jiafeng_icon.png`"></image>
              <view class="ml_5">
                家风家训
              </view>
            </view>
            <view class="right flex align-center justify-center" @click.stop="titleClick">
              <image :src="`${IMG_URL}/index/family_shouye_jizhang_icon.png`"></image>
              <view class="ml_5">
                家庭记账本
              </view>
            </view>
          </view>
        </view>
        <!--  家庭成员 -->
        <view class="family_familyMembers_allColumnCenter mt_18 flex flex-column align-center">
          <list-header title="家庭成员" width="658rpx" @listHeaderAllClick="listHeaderAllClick"
                       class="z-1">
            <template #button>
              <view class="listAllButton flex align-center justify-center" @click.stop="addFamilyMembers">
                <view class="name">添加</view>
                <image class="ml_10" :src="`${IMG_URL}/index/list_family_icon_add.png`"></image>
              </view>
            </template>
          </list-header>
          <scroll-view :scroll-x="true" class="family_familyMembers z-1">
            <view class="family_familyMembers_all flex align-center">
              <view class="family_familyMembers_list flex flex-column align-center"
                    v-for="(item,index) in family.member"
                    :key="index"
                    :style="{
                      marginLeft: index == 0 ? '0':'20rpx',
                    }"
                    @click.stop="goToUserPath(item)"
              >
                <s-avatar :width="92" :height="92" :src="`${item.avatar}`"></s-avatar>
                <template v-if="!!item.username && !!item.remark">
                  <view class="membersList_all_list_every_label flex align-center justify-center"
                        :style="{
                          background:item.gender == 1?'rgba(118,163,248,0.8)':'rgba(252,111,111,0.8)'
                        }"
                  >
                    <text class="membersList_all_list_every_label_text" v-if="!!item.remark">
                      {{ item.remark.slice(0, 4) }}
                    </text>
                  </view>
                  <text class="membersList_all_list_every_text mt_14" v-if="!!item.nickname">
                    {{ item.nickname.slice(0, 4) }}
                  </text>
                </template>
                <template v-else>
                  <text class="membersList_all_list_every_text mt_14">
                    {{ !!item.nickname ? item.nickname.slice(0, 4) : item.remark.slice(0, 4) }}
                  </text>
                </template>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="hW_10"></view>
        <!-- 用心记 -->
        <view class="wh_702 hW_110 bg_FFFFFF flex align-center justify-between"
              style="border-radius: 8rpx;"
              @click.stop="sheep.$router.go('/pages/familyPage/learnByHeart',{family_id:page.options.family_id})"
        >
          <view class="flex align-center wh_90 justify-center" style="border-right: 2rpx solid #E2E2E2">
            <image class="wh_50 hW_50" :src="`${IMG_URL}/index/learnByHeart.png`"></image>
            <!--            <view class="fs_14 color_FF7905 color_FF7905 wh_14 ml_5" style="line-height: 20rpx">用心记</view>-->
          </view>
          <view class="flex flex-sub align-center hW_90" v-if="page.family_remember.length > 0">
            <swiper class="flex-sub hW_90"
                    vertical
                    autoplay
                    circular
            >
              <swiper-item v-for="(item,index) in page.family_remember"
                           :key="index"
              >
                <view class="flex align-center hW_90">
                  <s-avatar class="ml_11"
                            :src="item.member_avatar.indexOf('http') != -1 ?item.member_avatar : `${nc_image}${item.member_avatar}`"
                            :width="46"
                            :height="46"
                  ></s-avatar>
                  <view class="flex flex-column flex-sub ml_5">
                    <view class="fs_22 fw_500 color_696969">{{ item.title }}:</view>
                    <view class="mt_4 fs_26 color_4E4E4E fw_500"
                          style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 520rpx"
                    >
                      {{ item.content }}
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <!-- 家庭纪念日 -->
        <view class="family_familyMembers_allColumnCenter mt_18 flex flex-column align-center">
          <list-header width="658rpx" title="家庭生日纪念日"
                       @listHeaderAllClick="anniversariesListPath" class="z_2">
            <template #button>
              <view class="listAllButton flex align-center justify-center" @click.stop="addFamilyAnniversary">
                <view class="name">添加</view>
                <image class="ml_10" :src="`${IMG_URL}/index/list_family_icon_add.png`"></image>
              </view>
            </template>
          </list-header>

          <scroll-view class="family_familyAnniversary z-1 mb_15" :scroll-x="true" style="white-space: nowrap;">
            <view class="family_familyAnniversary_all flex align-center" v-if="!!family.memorial_day">
              <card-hints v-for="(item,index) in family.memorial_day" :key="index" :info="item" :options="page.options"
                          :index="index"
                          :length="family.memorial_day.length"
                          @anniversariesListPath="goBirthday" @openLogin="openLogin"></card-hints>
            </view>
          </scroll-view>
        </view>
        <!-- 家庭圈 -->
        <view class="family_familyMembers_allColumnCenter mt_18 flex flex-column align-center">
          <list-header title="家庭圈" width="658rpx" @listHeaderAllClick="goFamilyCircleDetails">
            <template #button>
              <view class="listAllButton flex align-center justify-center" @click.stop="familyCircleBublish">
                <view class="name">发布</view>
                <image class="ml_10" :src="`${IMG_URL}/index/list_family_icon_publish.png`"></image>
              </view>
            </template>
          </list-header>
          <family-circle v-for="(item,index) in family.family_circle" :key="index" :info="item"
                         :detailFlag="true" :show-margin="index != 0"
                         :index="index" class="z-1" :is-show-reply="false" :isShowDel="false"
                         :border="family.family_circle.length - 1 != index" :options="page.options"
                         @likeInterface="familyCircleLike" @openCreateUser="openCreateUser"
                         @openLogin="openLogin" @shareAppMessage="shareAppMessage"></family-circle>
        </view>
        <!-- 发布家庭圈按钮 -->
        <view class="family_publish z_1 flex align-center justify-center mt_23" @click.stop="familyCircleBublish">
          <text class="family_publish_text">发布家庭圈</text>
        </view>
        <view class="hW_50"></view>
      </view>
    </scroll-view>

    <!-- 家庭成员弹窗 -->
    <first_popup ref="familyMemberPopUp" @closePopup="nameBoxClose">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              添加家庭成员
            </view>
            <view class="familyMemberPopUp_title_detail">
              {{ family.details.name }}
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <scroll-view :scroll-left="familyMember.scrollLeft" :scroll-x="true"
                       class="familyMemberPopUp_scrollView mt-32"
                       scroll-with-animation>
            <view :id="familyMember.selectProfileIndex == index ? 'familyMemberPopUp_scrollView_list':''"
                  class="familyMemberPopUp_scrollView_list"
                  v-for="(item,index) in familyMember.familyMembersProfileList" :style="{
              padding:index == 0 ? '0 12rpx 0 0':index == familyMember.familyMembersProfileList.length?'0 0 0 12rpx':'0 12rpx'
            }" :key="index" @click="changeTab(index)">
              <sAvatar id="imageAvater" :width="familyMember.selectProfileIndex == index?111 : 78"
                       :height="familyMember.selectProfileIndex == index? 111 : 78" :src="`${nc_image}${item.avatar}`"
                       :is-order="familyMember.selectProfileIndex == index"
                       :border-width="4" border-color="#FF4206"></sAvatar>
            </view>
          </scroll-view>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="familyMember.nameBox" placeholder="尊姓"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="suernameInput"
                     @blur="surnameBlur">
            </view>
            <view class="familyMemberPopUp_editInfo_right flex align-center justify-center">
              <input type="text" v-model="familyMember.appellation" placeholder="大名"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="nameInput" @blur="nameBlur">
            </view>
          </view>
        </view>
      </template>
    </first_popup>

    <!-- 家庭纪念日弹窗 -->
    <first_popup ref="familyAnniversaryPopUp">
      <template #content>
        <view class="familyAnniversaryPopUp z_10">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              请选择
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1 z" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyAnniversaryPopUp_list flex align-center justify-between z_10"
                v-for="(item,index) in familyMember.familyAnniversaryType" :key="index"
                @click.stop="jumpAddFamilyAnniversary(index)">
            <text class="familyAnniversaryPopUp_list_text">{{ item.name }}</text>
            <view class="familyAnniversaryPopUp_list_selectLine"
                  v-if="familyMember.selectFamilyAnniversaryType == index"></view>
            <view class="familyAnniversaryPopUp_list_line" v-else></view>
          </view>
        </view>
      </template>
    </first_popup>

    <!-- 分享标 -->
    <s-share-floating-window mode="left" ref="shareFloatingWindow" v-if="!!is_login"
                             @shareFriendsAndFamily="shareFriendsAndFamily"></s-share-floating-window>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { onLoad, onShareAppMessage, onShow } from '@dcloudio/uni-app';
  import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from 'vue';
  import sheep from '@/sheep';
  import ListHeader from '@/pages/family/components/listHeader.vue';
  import sAvatar from '@/sheep/components/s-avatar/s-avatar.vue';
  import CardHints from '@/pages/family/components/cardHints.vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import FamilyCircle from '@/pages/family/components/familyCircle.vue';
  import familyCircle from '@/pages/family/components/familyCircle.vue';
  import First_popup from '@/pages/family/components/first_popup.vue';

  const { proxy } = getCurrentInstance();

  const page = reactive({
    options: {},
    headerHeight: 0,
    // 用心记列表
    family_remember: [],
  });
  const family = reactive({
    details: {},
    member: [],
    family_circle: [],
    family_album: [],
  });
  // 获取家庭圈参数
  const familyCircleOption = reactive({
    page: 1,
    pagesize: 10,
    total: 0,
  });
  const familyMember = reactive({
    scrollLeft: 0,
    nameBox: '',
    appellation: '',
    familyMembersProfileList: [],
    selectProfileIndex: 0,
    familyAnniversaryType: [
      {
        name: '添加生日',
      },
      {
        name: '添加纪念日',
      },
    ],
    selectFamilyAnniversaryType: -1,
  });

  const is_login = computed(() => sheep.$store('user').isLogin);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);

  onLoad((options) => {
    page.options = options;
    uni.$on('delectClecir', () => {
      family.family_circle = [];
      familyCircleOption.page = 1;
      getFamilyCircle();
    });
  });

  onShow(() => {
    family.family_circle = [];
    // 获取家庭相册封面
    getFamilyAlbum();
    // 获取家庭成员
    getFamilyMembers();
    // 获取生日纪念日
    getFamilyMemoryDay();
    // 获取家庭圈
    getFamilyCircle();
    // 获取用心记
    getLearnSwiper();
  });

  onMounted(() => {
    nextTick(() => {
      // 获取家庭详情
      getFamilyDetail();
    });
  });


  // 获取家庭详情
  async function getFamilyDetail() {
    const { data } = await sheep.$api.family.getFamilyCulture({
      family_id: page.options.family_id,
    });
    family.details = data;
  }

  // 获取页面标题高度
  function getPageHeight(number) {
    page.headerHeight = number;
  }

  // 获取家庭相册
  async function getFamilyAlbum() {
    const { data } = await sheep.$api.family.getFamilyCover({
      family_id: page.options.family_id,
    });
    family.family_album = data;
  }

  // 获取家庭成员
  async function getFamilyMembers() {
    const { data } = await sheep.$api.family.getFamilyMemberList({
      family_id: page.options.family_id,
      page: 1,
      pagesize: 10,
    });
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      arr.push(data[i]);
    }
    family.member = arr;
  }

  // 获取生日纪念日
  async function getFamilyMemoryDay() {
    const { data } = await sheep.$api.family.getFamilyMemoryDay({
      family_id: page.options.family_id,
    });
    family.memorial_day = data.memorydays;
  }

  // 获取家庭圈
  async function getFamilyCircle() {
    const { data } = await sheep.$api.family.getFamilyCircle({
      family_id: page.options.family_id,
      page: familyCircleOption.page,
      pagesize: familyCircleOption.pagesize,
    });
    familyCircleOption.total = data.count;
    family.family_circle = [...family.family_circle, ...data.list];
  }

  // 发布朋友圈
  async function familyCircleBublish() {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code == 1) {
      sheep.$router.go('/pages/family/familyCircleRelease', {
        family_id: page.options.family_id,
      });
    }
  }

  // 跳转相册列表
  function goFamilyAlbum() {
    sheep.$router.go('/pages/family/photoAlbum', {
      family_id: page.options.family_id,
    });
  }

  function goFamilyCircleDetails() {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    sheep.$router.go('/pages/family/familyCirclePage', {
      is_flag: 1,
      family_id: page.options.family_id,
    });
  }

  const familyMemberPopUp = ref();

  // 添加家庭成员
  async function addFamilyMembers() {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    const { data } = await sheep.$api.family.getDefaultAvatar({ type: 0 });
    familyMember.familyMembersProfileList = data;
    familyMemberPopUp._value.openPopup({
      title: '添加家庭成员',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        if (familyMember.nameBox == '') {
          uni.showToast({
            title: '姓氏尚未填写',
            icon: 'none',
          });
          return;
        }
        if (familyMember.appellation == '') {
          uni.showToast({
            title: '名称尚未填写',
            icon: 'none',
          });
          return;
        }
        const { code } = await sheep.$api.family.addFamilyMember({
          family_id: page.options.family_id,
          surname: familyMember.nameBox,
          daimyo: familyMember.appellation,
          gender: familyMember.familyMembersProfileList[familyMember.selectProfileIndex].sex,
          avatar: familyMember.familyMembersProfileList[familyMember.selectProfileIndex].avatar,
        });
        if (code == 1) {
          uni.showToast({
            title: '添加成功',
            icon: 'none',
          });
          familyMemberPopUp._value.closePopup();
          familyMember.nameBox = '';
          familyMember.appellation = '';
          family.member = [];
          await getFamilyMembers();
        }
      },
    });
  }

  // 关闭弹窗
  function nameBoxClose() {
    familyMemberPopUp._value.closePopup();
  }

  // 处理用户名的输入事件
  function suernameInput(e) {
    if (e.target.value.length > 1) {
      let arr;
      // arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      arr = e.target.value
      if (!!arr) {
        familyMember.nameBox = arr.join('').substring(0, 2);
      } else {
        familyMember.nameBox = '';
      }
    }
  }

  // 用于处理用户名的输入失去焦点事件
  function surnameBlur(e) {
    if (e.target.value.length > 0) {
      let arr;
      // arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      arr = e.target.value
      if (!!arr) {
        familyMember.nameBox = arr.join('').substring(0, 2);
      } else {
        familyMember.nameBox = '';
      }
    }
  }

  function nameInput(e) {
    if (e.target.value.length > 1) {
      let arr;
      // arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      arr = e.target.value
      if (!!arr) {
        familyMember.appellation = arr.join('').substring(0, 4);
      } else {
        familyMember.appellation = '';
      }
    }
  }

  function nameBlur(e) {
    if (e.target.value.length > 0) {
      let arr;
      // arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
      arr = e.target.value
      if (!!arr) {
        familyMember.appellation = arr.join('').substring(0, 4);
      } else {
        familyMember.appellation = '';
      }
    }
  }

  function changeTab(index) {
    familyMember.selectProfileIndex = index;
    setTimeout(() => {
      moveTo(index);
    }, 10);
  }

  const familyMembersProfileListScroll = reactive({
    width: 0,
    selectWidth: 0,
    allWidth: 0,
  });

  watch(familyMembersProfileListScroll, (newVal, oldVal) => {
    familyMember.scrollLeft = newVal.allWidth - newVal.width / 2 + newVal.selectWidth / 2;
  });

  function moveTo(index) {
    const query = uni.createSelectorQuery().in(proxy);
    query.select('.familyMemberPopUp_scrollView').boundingClientRect(data => {
      familyMembersProfileListScroll.width = data.width;
    }).exec();
    query.select('#familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
      familyMembersProfileListScroll.selectWidth = rect.width;
    }).exec();
    query.selectAll('.familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
      if (rect.length > 0) {
        familyMembersProfileListScroll.allWidth = 0;
        rect.forEach((item, i) => {
          if (i < index) {
            familyMembersProfileListScroll.allWidth += Number(item.width);
          }
        });
      }
    }).exec();

  }

  const familyAnniversaryPopUp = ref();

  async function addFamilyAnniversary() {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg)
      return;
    }
    familyAnniversaryPopUp._value.openPopup({
      title: '请选择',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
    });
  }

  function jumpAddFamilyAnniversary(index) {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    familyMember.selectFamilyAnniversaryType = index;
    setTimeout(() => {
      switch (index) {
        case 0:
          uni.$once('refreshFamilyMemoryDay', () => {
            getFamilyMemoryDay();
          });
          sheep.$router.go('/pages/family/birthday', {
            family_id: page.options.family_id,
          });
          familyAnniversaryPopUp._value.closePopup();
          familyMember.selectFamilyAnniversaryType = -1;
          return;
        case 1:
          sheep.$router.go('/pages/family/anniversary', {
            family_id: page.options.family_id,
          });
          familyAnniversaryPopUp._value.closePopup();
          familyMember.selectFamilyAnniversaryType = -1;
          return;
      }
    }, 500);
  }

  function goBirthday(status = 1, info) {
    if (!is_login.value) {
      this.$refs.loginPopup.openPopup();
      return;
    }
    if (info.type == 1) {
      sheep.$router.go('/pages/family/dayDetail', { type: 1, record_id: info.id, family_id: page.options.family_id });
    } else {
      sheep.$router.go('/pages/family/dayDetail', { type: 2, record_id: info.id, family_id: page.options.family_id });
    }
  }

  function listHeaderAllClick() {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    sheep.$router.go('/pages/familyPage/membersList', {
      family_id: page.options.family_id,
    });
  }

  function anniversariesListPath() {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    sheep.$router.go('/pages/familyPage/anniversariesList', {
      family_id: page.options.family_id,
      is_flag: 1,
    });
  }

  function goToUserPath(item) {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    sheep.$router.go('/pages/familyPage/memberDetails', {
      id: item.id,
      family_id: page.options.family_id,
    });
  }

  function openFamilyTraditionPath() {
    sheep.$router.go('/pages/family/familyTraditioDiscipline', {
      family_name: family.details.name,
      family_id: page.options.family_id,
    });
  }

  function titleClick() {
    // return;
    sheep.$router.go('/pages/family/accountingBook', {
      family_id: page.options.family_id,
    });
  }

  function familyCircleLike(index) {
    family.family_circle[index].circle.like_count++;
    family.family_circle[index].circle.is_like = 1;
  }

  function shareFriendsAndFamily() {
    console.log(family.details);
    uni.setStorageSync('setFamilyShare', JSON.stringify({
      family_id: family.details.id,
      code: family.details.family_id,
      name: family.details.name,
    }));
    sheep.$router.go('/pages/familyPage/familyQRCode', { family_id: family.details.id });
  }

  async function getLearnSwiper() {
    const { data } = await sheep.$api.family.getFamilyRememberListByFamilyId({
      family_id: page.options.family_id,
      num: 10,
    });
    page.family_remember = data;
  }

  // #ifdef MP-WEIXIN
  onShareAppMessage((res) => {
    console.log(res);
    // 家庭圈分享
    if (res.from == 'button') {
      return {
        title: res.target.dataset.info.circle.content.replace(/<[^>]*>/g, ''),
        path: res.target.dataset.path,
        imageUrl: !!res.target.dataset.info.circle.images && res.target.dataset.info.circle.images.length > 0 ? res.target.dataset.info.circle.images[0].image : `${IMG_URL.value}/index/share_background_defult.png`,
      };
    }
  });
  // #endif
</script>


<style scoped lang="scss">
  .anniversariesList_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .anniversariesList_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      // font-weight: 500;
      font-size: 20rpx;
      color: rgba(255, 255, 255, 0.2);
    }
  }

  .family_header {
    width: 702rpx;
    height: 477rpx;
    background: url($uni-bg-url-sq + "/index/001.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .family_header_image {
      width: 83rpx;
      height: 83rpx;
    }

    .family_header_desc {
      .family_header_desc_text {
        font-family: Heiti SC, Heiti SC;
        font-weight: 700;
        font-size: 30rpx;
        color: #FF4208;
      }

      .family_header_desc_littleText {
        font-family: Heiti SC, Heiti SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #FFFFFF;
      }
    }
  }

  .list_tap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 369rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 0.42);
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    padding: 9rpx 8rpx;

    .left {
      width: 171rpx;
      height: 42rpx;
      background: #F8F8F8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #CC8A00;

      image {
        width: 25rpx;
        height: 25rpx;
      }
    }

    .right {
      width: 171rpx;
      height: 42rpx;
      background: #F8F8F8;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #FF7950;

      image {
        width: 23rpx;
        height: 24rpx;
      }
    }
  }

  .family_familyMembers_allColumnCenter {
    width: 702rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    background: #FFFFFF;
    overflow: hidden;
    padding: 0 0 20rpx 0;

    .family_familyMembers {
      width: 658rpx;
      //height: 344rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      white-space: nowrap;

      .family_familyMembers_all {
        margin: 0 0 30rpx 0;
        //display: grid;
        //grid-template-columns: repeat(5, 1fr);
        ////grid-template-rows: repeat(2, 45%);
        //grid-row-gap: 20rpx;
        //grid-column-gap: 20px;
        //justify-content: space-between;
        //align-items: center;

        .family_familyMembers_list {
          position: relative;

          .membersList_all_list_every_label {
            width: 84rpx;
            height: 27rpx;
            background: #FFFFFF;
            border-radius: 14rpx 14rpx 14rpx 14rpx;
            //border: 1rpx solid #9B9B9B;
            position: absolute;
            top: 77rpx;
            left: 50%;
            transform: translateX(-50%);

            .membersList_all_list_every_label_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18rpx;
              color: #FFFFFF;
            }
          }

          .membersList_all_list_every_name {
            .membersList_all_list_every_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #292929;
            }
          }

          .membersList_all_list_every_text {
            white-space: nowrap;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #292929;
          }
        }


        .family_familyMembers_addList {
          .family_familyMembers_addList_image {
            width: 92rpx;
            height: 92rpx;
          }

          .family_familyMembers_addList_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #696969;
          }
        }
      }
    }

    .family_familyAnniversary {
      width: 658rpx;
      overflow: hidden;
      white-space: nowrap;

      //.family_familyAnniversary_all {
      //  padding: 5rpx 0 10rpx 0;
      //}
    }
  }


  .listAllButton {
    width: 111rpx;
    height: 40rpx;
    border-radius: 21rpx 21rpx 21rpx 21rpx;
    border: 2rpx solid #FF4206;

    .name {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 24rpx;
      color: #FF4206;
    }

    image {
      width: 22rpx;
      height: 22rpx;
    }
  }

  .family_publish {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .family_publish_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .familyAnniversaryPopUp {
    width: 496rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyAnniversaryPopUp_list {
      margin: 52rpx 0;

      .familyAnniversaryPopUp_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #000000;
      }

      .familyAnniversaryPopUp_list_line {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        border: 2rpx solid #2F2F2F;
      }

      .familyAnniversaryPopUp_list_selectLine {
        width: 26rpx;
        height: 26rpx;
        border-radius: 50%;
        border: 6rpx solid #FF4206;
      }
    }
  }
</style>
